<template>
  <div
    class="custom-modal-wrap"
    ref="modalWrapRef"
    v-if="visible"
    @click="onClose"
  >
    <div class="custom-modal" @click.stop>
      <BorderBox1>
        <div class="custom-modal-content">
          <div class="title">
            选择组件
            <div class="close-button" @click="onClose">
              <CloseCircleOutlined />
            </div>
          </div>
          <div class="tab-wrap">
            <a-tabs
              v-model:activeKey="currentTab"
              v-if="tabList.length > 0"
              @change="onTabChange"
            >
              <a-tab-pane
                :key="item.value"
                :tab="item.label"
                v-for="item of tabList"
              ></a-tab-pane>
            </a-tabs>
          </div>
          <div class="module-list">
            <div
              class="module-item-wrap"
              v-for="(item, index) of list"
              :key="index"
            >
              <div class="module-item" @click="onClose(item)">
                <img :src="item.img" alt="" class="module-item-img" />
                <div class="module-item-footer">
                  <div class="module-item-name">
                    {{ item.name }}
                  </div>
                </div>
                <div class="module-item-tag">
                  {{ item.columns }} x {{ item.rows }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </BorderBox1>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  toRaw,
  ref,
  nextTick,
} from "vue";
import request from "../../../../common/utils/request";
import store from "../../../../store/index";
import { useRoute, useRouter } from "vue-router";
import utils from "../../../../common/utils/utils";
import { Modal, notification, message } from "ant-design-vue";
import { CloseCircleOutlined } from "@ant-design/icons-vue";
import { BorderBox1 } from "@kjgl77/datav-vue3";

export default defineComponent({
  name: "BuildRealPic",
  components: { CloseCircleOutlined, BorderBox1 },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },

  setup(props, context) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      tabList: [],
      modules: [],
      list: [],
      currentTab: null,
    });

    const onClose = (item) => {
      context.emit("onClose", item);
    };

    const getModuleConfig = () => {
      request.get("/datav", "/module/config/get", {}).then((res) => {
        if (res.result) {
          if (res.result.module) {
            state.modules = res.result.module;
          }

          if (res.result.classify) {
            state.tabList = res.result.classify;
            state.currentTab = res.result.classify[0].value;
            state.list = [];
            let list = JSON.parse(JSON.stringify(state.modules));
            state.list = list.filter(
              (item) => item.classify == state.currentTab
            );
          }
        }
      });
    };

    const init = () => {
      getModuleConfig();
    };

    init();

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          // init();
        }
      }
    );

    const onTabChange = (key) => {
      state.list = [];
      let list = JSON.parse(JSON.stringify(state.modules));
      state.list = list.filter((item) => item.classify == state.currentTab);
    };

    return {
      ...toRefs(state),
      onClose,
      onTabChange,
    };
  },
});
</script>

<style lang="less" scoped>
.custom-modal-wrap {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.45);
  pointer-events: all;

  .custom-modal {
    width: 120rem;
    height: 80rem;
    margin: 6rem auto 0 auto;
    border-radius: 0.8rem;
    overflow: hidden;

    :deep(.border-box-content) {
      padding: 1.2rem;
    }

    .custom-modal-content {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 77, 145, 0.8);
      border-radius: 3rem;
      box-shadow: inset 0 0 1rem #fff;

      .title {
        height: 7rem;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 2rem;
        font-weight: bold;
        padding-top: 2rem;
        padding-bottom: 1rem;

        .close-button {
          position: absolute;
          top: 0.5rem;
          right: 1rem;
          width: 4rem;
          height: 4rem;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          font-size: 2rem;
        }
      }

      .tab-wrap {
        width: 100%;
        height: 5rem;
      }

      :deep(.ant-tabs-bar) {
        border-bottom: none;
        margin-bottom: 0;
      }

      :deep(.ant-tabs-nav-scroll) {
        display: flex;
        padding: 0 2.5rem;
      }

      :deep(.ant-tabs-tab) {
        color: #fff;
        margin: 0 2rem 0 0;
        padding: 1rem;
      }

      :deep(.ant-tabs-ink-bar) {
        background-color: #fff;
      }
    }

    .module-list {
      width: 100%;
      height: calc(100% - 12rem);
      overflow: hidden auto;
      display: flex;
      flex-wrap: wrap;
      padding: 0 2rem;
      align-content: flex-start;

      .module-item-wrap {
        padding: 0.5rem;
        width: 28.4rem;
        height: 28.4rem;

        .module-item {
          width: 100%;
          height: 100%;
          background-color: #094070;
          border: 1px solid #075587;
          border-radius: 0.8rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          transition: 0.2s ease;
          position: relative;

          &:hover {
            border: 1px solid #fff;
          }

          .module-item-img {
            width: 100%;
            height: 22.2rem;
            object-fit: contain;
          }

          .module-item-footer {
            width: 100%;
            height: 5rem;
            padding: 0 1rem;

            .module-item-name {
              width: 100%;
              height: 100%;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
              border-top: 0.1rem solid #176395;
            }
          }

          .module-item-tag {
            position: absolute;
            top: 0.8rem;
            right: 0.8rem;
            background-color: #169bd5;
            padding: 0 1rem;
            border-radius: 0.4rem;
          }
        }
      }
    }
  }
}
</style>
